<template>
	<div style="height:100%">
		<el-scrollbar>
			<el-container class="el-container" direction="vertical">
				<main-header></main-header>
				<div style="text-align:center">
					<div style="" class="editor-field">
						<div style="display:flex;margin-top: 30px;">
							<div style="max-width:540px;">
								<div style="text-align:left;margin-left: 40px;">
									<el-input type="text" placeholder="标题" v-model="route.title" maxlength="50" :show-word-limit=true
										autofocus="ture" class="input-title">
									</el-input>
								</div>
								<div style="text-align:left;margin-left: 40px;">
									<el-input type="textarea" placeholder="路线简介" v-model="route.description" maxlength="300"
										class="description" :show-word-limit=true :rows="4">
									</el-input>
								</div>
								<div class="tag" style="margin-top:40px;margin-bottom: 0px;text-align:left;margin-left:40px;">
									<el-tag :key="tag" v-for="tag in route.tags" size='success' closable :disable-transitions="false"
										@close="handleClose(tag)" style="margin-right:10px;margin-bottom:10px;">
										{{ tag }}
									</el-tag>
									<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
										size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"
										style="margin-right:10px;margin-bottom:10px;">
									</el-input>
									<el-button v-else class="button-new-tag" size="small" type="info" @click="showInput">+ 标签
									</el-button>
								</div>
							</div>
							<div style="margin-left:200px;margin-top: 30px;">
								<UploadImage :img-src="route.cover"></UploadImage>
							</div>
						</div>
						<div>
							<div v-for="(node, nodeIndex) in route.nodes" :key="nodeIndex">
								<template>
									<div style="text-align:center; margin-left: 40px;">
										<div class="nodeTitle" style="max-width:1057px;margin-top: 40px;">
											<el-input placeholder="节点标题" v-model="node.title">
												<template slot="prepend"><i style="font-weight:bold;color:black">{{ '节点'
														+ ' ' + (nodeIndex + 1)
												}}</i></template>
											</el-input>
										</div>

										<div style="margin-top: 15px;">
											<div style="min-width=1057px">
												<template>
													<div class="local-quill-editor">
														<quill-editor ref="myLQuillEditor" v-model="node.description" :options="editorOption"
															class="editor">
														</quill-editor>
													</div>
												</template>
											</div>
											<div>
												<div v-for="(resource, resourceIndex) in node.resources" :key="resourceIndex">
													<div class="source" style="max-width:1057px;margin-bottom: 10px;">
														<el-input v-if="resourceIndex != node.resources.length - 1 || resourceIndex === 0"
															placeholder="资源名" v-model="resource.title" style="max-width:1057px;">
														</el-input>
														<el-input v-if="resourceIndex === node.resources.length - 1 && resourceIndex > 0"
															placeholder="资源名" v-model="resource.title" style="max-width:1000px;">
														</el-input>
														<el-button v-if="resourceIndex === node.resources.length - 1 && resourceIndex > 0"
															@click="removeResource(nodeIndex, resourceIndex)" icon="el-icon-remove-outline"
															style="background-color: #fff;">
														</el-button>

														<el-input placeholder="资源链接(请以'https://'开头)" v-model="resource.url"
															style="max-width:1000px;">
														</el-input>
														<el-button @click="addResource(nodeIndex)" icon="el-icon-circle-plus-outline"
															style="background-color: #fff;"></el-button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</template>
							</div>
							<div style="display:inline-block;">
								<div style="margin-top: 20px;display:inline-block;width: 600px;text-align: center;margin-bottom: 20px;">
									<el-button @click="addNode" style="text-align: center;" type="info" icon="el-icon-plus" size="mini">
										添加节点
									</el-button>
									<el-button @click="postRoute" style="text-align: center;" type="success" icon="el-icon-s-promotion"
										:disabled="route.nodes.length < 2">发布
									</el-button>
									<el-button @click="saveRoute" style="text-align: center;" type="primary"
										icon="el-icon-document-checked">保存
									</el-button>
									<el-button @click="removeNode" style="text-align: center;" type="info" icon="el-icon-minus"
										size="mini">
										删除节点
									</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-container>
		</el-scrollbar>
	</div>
</template>
    
<script>
import MainHeader from '@/components/MainHeader.vue'
import UploadImage from '@/components/RouteEditor/UploadImage.vue'
import request from '@/API/request'
//import { Message } from 'element-ui'
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { Message } from 'element-ui'

const toolbarOptions = [// 工具栏配置项
	// 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
	['bold', 'italic', 'underline', 'strike'],
	// 引用  代码块-----['blockquote', 'code-block']
	['blockquote', 'code-block'],
	// 1、2 级标题-----[{ header: 1 }, { header: 2 }]
	[{ header: 1 }, { header: 2 }],
	// 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
	[{ list: 'ordered' }, { list: 'bullet' }],
	// 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
	[{ script: 'sub' }, { script: 'super' }],
	// 缩进-----[{ indent: '-1' }, { indent: '+1' }]
	[{ indent: '-1' }, { indent: '+1' }],
	// 文本方向-----[{'direction': 'rtl'}]
	[{ direction: 'rtl' }],
	// 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
	[{ size: ['small', false, 'large', 'huge'] }],
	// 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
	[{ color: [] }, { background: [] }],
	// 对齐方式-----[{ align: [] }]
	[{ align: [] }],
	// 清除文本格式-----['clean']
	['clean'],
	// 链接、图片、视频-----['link', 'image', 'video']
]

export class node {
	title = '';
	description = '';
	resources = [];
	position = 0
	constructor(order) {
		this.title = '';
		this.description = '';
		this.position = order;
		this.resources = [];
		this.resources[0] = new resource();
	}
}
export class resource {
	title = '';
	url = '';
	constructor() {
		this.resourceTitle = '';
		this.url = '';
	}
}

export default {
	name: 'LocalQuillEditor',
	// 注册 quillEditor
	props: {
		num: {
			type: Number,
			default: 1
		}
	},
	components: { MainHeader, UploadImage, quillEditor },
	data() {
		return {
			route: {
				title: '',//路线标题
				description: '',//路线简介
				cover: '',
				author: '',
				nodes: [],//路线节点列表
				tags: [],//路线标签列表
			},
			inputVisible: false,
			inputValue: '',
			editorOption: {//quill-editor部分
				modules: {
					toolbar: toolbarOptions
				},
				theme: 'snow',
				placeholder: '节点描述'
				// Some Quill optiosn...
			},
			order: 0 //记录节点的顺序
		}
	},
	methods: {
		addNode() {
			this.route.nodes.push(new node(this.order++));
		},
		removeNode() {
			this.order--;
			this.route.nodes.splice(this.order, 1);
		},
		addResource(nodeIndex) {
			this.route.nodes[nodeIndex].resources.push(new resource());
		},
		removeResource(nodeIndex, resourceIndex) {
			this.route.nodes[nodeIndex].resources.splice(resourceIndex, 1);
		},
		handleClose(tag) {
			this.route.tags.splice(this.route.tags.indexOf(tag), 1);
		},
		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
				return _;//不加这句eslint不让过
			});
		},
		handleInputConfirm() {
			let inputValue = this.inputValue;
			if (inputValue && this.route.tags.length < 6) {
				this.route.tags.push(inputValue);
			}
			else if (this.route.tags.length === 6) {
				console.log('TOO MUCH TAGS!')
			}
			this.inputVisible = false;
			this.inputValue = '';
		},
		postRoute() {
			if (this.route.nodes.length >= 2) {//路线包含的节点数量至少为2个
				this.route.author = this.$store.state.userInfo.id,
					request.post('/route/publish', {
						id: this.$store.state.userInfo.id,
						isDraft: false,
						route: this.route
					}).then((res) => {
						if (res.data.code === 200) {
							this.$notify({
								title: '发布成功',
								message: '获得成就 “今日事，今日毕！”',
								type: 'success',
								position: 'bottom-right'
							});
							this.$router.back()
						} else {
							Message({
								type: 'error',
								message: res.data.msg,
								customClass: 'message-global'
							})
						}
					}).catch((err) => {
						Message({
							type: 'error',
							message: err,
							customClass: 'message-global'
						})
					})
			}

		},
		saveRoute() {
			this.route.author = this.$store.state.userInfo.id,
				request.post('/route/publish', {
					id: this.$store.state.userInfo.id,
					isDraft: true,
					route: this.route
				}).then((res) => {
					if (res.data.code === 200) {
						this.$notify({
							title: '保存成功',
							message: '获得成就 “拖延症!!!”',
							type: 'info',
							position: 'bottom-right'
						});
						this.$router.back()
					} else {
						Message({
							type: 'error',
							message: res.data.msg,
							customClass: 'message-global'
						})
					}
				}).catch((err) => {
					Message({
						type: 'error',
						message: err,
						customClass: 'message-global'
					})
				})
		}
	},
	mounted() {
		if (this.$route.query.new === '0') {
			request.get('/route/detail', {
				params: {
					id: this.$route.query.id
				}
			}).then(res => {
				if (res.data.code === 200) {
					this.route = res.data.data.route
					this.order = this.route.nodes.length
				} else {
					Message({
						type: 'error',
						message: res.data.msg,
						customClass: 'message-global'
					})
				}
			}).catch(err => {
				Message({
					type: 'error',
					message: err,
					customClass: 'message-global'
				})
			})
		}
		this.$bus.$on('getCover', (cover) => {
			this.route.cover = cover
		})
	}
}
</script>

<style scoped lang="scss">
.el-tag+.el-tag {
	margin-left: 10px;
}

.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}

.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}

.input-title {
	margin-top: 30px;
	text-align: left;
	max-width: 500px;
	width: 1000px;
}

.description {
	margin-top: 30px;
	text-align: center;
	max-width: 500px;
	width: 1000px;
}

.nodeeditor {
	margin-top: 30px;
	text-align: center;
	margin-left: 90px;
}

.el-container {
	height: 100%;
}

.editor-field {
	margin-top: 30px;
	min-width: 1195px;
	max-width: 1200px;
	display: inline-block;
	box-shadow: 3px 3px 3px 3px #c3c2c2;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.8);
}

.local-quill-editor {
	height: 300px;
	max-width: 1057px;
}

.quill-editor {
	height: 83%;
	max-width: 1057px;
}

.el-scrollbar {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

:deep .el-scrollbar__wrap {
	height: 100%;
	overflow: scroll;
	overflow-x: auto;
}

/deep/ .el-tag+.el-tag[data-v-0834bd51] {
	margin-left: 0px;
	margin-right: 10px;
}

/deep/ .button-new-tag[data-v-0834bd51] {
	margin-left: 0px;
}

/deep/ .el-input {
	margin-left: 0px;
}
</style>